import { Navigate, Outlet, UIMatch, useMatches } from 'react-router'

import { PageHeader } from '@/components/PageHeader'
import { PageLayout } from '@/components/PageLayout'
import { IRouteHandle } from '@/routerConfig/interface'
import { globalPopupSlot } from '../globalPopupSlot'
import { BreadcrumbNav } from './BreadcrumbNav'
import { LeftSider } from './LeftSider'

export const Biz = () => {
  const matches = useMatches() as UIMatch<unknown, IRouteHandle | undefined>[]
  const isRootRoute = matches.length === 1

  const hideLeftSider = !!matches.find(item => !!item.handle?.hideLeftSider)
  const hideBreadcrumb = !!matches.find(item => !!item.handle?.hideBreadcrumb)
  const noLayout = !!matches.find(item => !!item.handle?.noLayout)

  if (isRootRoute) {
    const path = '/biz/trackOrder/list'
    return <Navigate to={path} replace />
  }

  return (
    <>
      {noLayout ? (
        <Outlet />
      ) : (
        <PageLayout
          minWidth={1280}
          left={!hideLeftSider && <LeftSider />}
          rightTop={<PageHeader left={!hideBreadcrumb && <BreadcrumbNav />} />}
          rightMain={
            <div style={{ height: '100%', padding: '16px 24px' }}>
              <Outlet />
            </div>
          }
        />
      )}

      <globalPopupSlot.Slot />
    </>
  )
}
